<template>
	<view class="order">
		<u-sticky>
			<view class="order-top">
				<view @click="show=true">{{labelText}}</view>
				<view style="margin-left: 6rpx;margin-top: 6rpx;" @click="show=true">
					<u-icon v-if="show" name="arrow-up-fill" color="#005d98" size="26rpx"></u-icon>
					<u-icon v-else name="arrow-down-fill" color="#005d98" size="26rpx"></u-icon>
				</view>
				<image src="/static/rl.png" style="width: 30rpx;height: 30rpx;margin-left: auto;"></image>
				<view style="margin-left: 10rpx;">{{startTime}} - {{endTime}}</view>

			</view>
		</u-sticky>
		<view class="order-list" v-for="(item,index) in dataList" :key="index" @click="goDetail(item)">
			<view class="list-title">
				<view class="status-img">
					<image v-if="item.status==2" src="/static/ordera.png" style="width: 35rpx;height: 35rpx;"></image>
					<image v-if="item.status==1" src="/static/orderd.png" style="width: 38rpx;height: 38rpx;"></image>
				</view>
				<view>
					<text v-if="item.status==2">使用完成</text>
					<text v-if="item.status==1">使用中</text>
				</view>
				<view class="title-name">空压机</view>
			</view>
			<view class="list-item" style="margin-top: 31rpx;">
				<view style="width: 160rpx;">订单编号：</view>{{item.orderId}}
			</view>
			<view class="list-item">
				<view style="width: 160rpx;">下单时间：</view>{{item.createTime}}
			</view>
			<view class="list-item">
				<view style="width: 160rpx;">空压机：</view>{{item.extendOrderId}}
			</view>
			<view class="list-item">
				<view style="width: 160rpx;">车牌号：</view>{{item.realName}}
			</view>
			<view class="list-item">
				<view style="width: 160rpx;">货物载重：</view>{{item.handsel}}
			</view>
			<view class="list-item item-border">
				<view style="width: 160rpx;">物料类型：</view>{{item.deliveryName}}
			</view>
			<view class="order-tag">
				<view class="tag-item">
					<image src="/static/ordere.png" style="width: 33rpx;height: 33rpx;"></image>
					<view style="margin-left: 10rpx;">{{item.totalNum}}分钟</view>
				</view>
				<view class="tag-item">
					<image src="/static/orderf.png" style="width: 40rpx;height: 40rpx;"></image>
					<view style="margin-left: 10rpx;">{{item.payPrice}}元</view>
				</view>
				<view class="tag-item">
					<image src="/static/orderg.png" style="width: 40rpx;height: 40rpx;"></image>
					<view style="margin-left: 10rpx;">{{item.refundPrice?item.refundPrice:0}}元</view>
				</view>
			</view>
		</view>
		<u-loadmore v-if="!isEmpty" :status="status" />
		<view v-if="isEmpty">
			<image src="../../static/noOrder.png" mode="widthFix"
				style="width: 414rpx;margin: 100rpx auto;display: block;">
			</image>
		</view>
		<u-picker :show="show" :columns="timeList" @close="show=false" @cancel="show=false" @confirm="confirm"
			:defaultIndex="[0]" keyName="label"></u-picker>
	</view>
</template>

<script>
	import {
		getOrderList
	} from '@/api'
	export default {
		data() {
			return {
				isEmpty: false,
				status: 'loading',
				dataList: [],
				pageSize: 10,
				pageNum: 1,
				isLoadMore: false,
				show: false,
				labelText: '最近30天',
				startTime: '',
				endTime: '',
				timeList: [
					[{
							label: '最近30天',
							val: 30
						},
						{
							label: '最近60天',
							val: 60
						},
						{
							label: '最近1年',
							val: 365
						}
					]
				]
			}
		},
		onShow() {
			this.dataList = []
			this.status = 'loading'
			this.page = 1
			this.getLast30Days(30)
		},
		onReachBottom() {
			if (!this.isLoadMore) {
				//此处判断，上锁，防止最后一页还触发
				this.isLoadMore = true;
				this.pageNum++;
				this.getList();
			}
		},
		methods: {
			getLast30Days(day) {
				const dates = [];
				const today = new Date();
				for (let i = day; i >= 0; i--) {
					const date = new Date();
					date.setDate(today.getDate() - i);
					dates.push(this.formatDate(date));
				}
				this.startTime = dates[0]
				this.endTime = dates[dates.length - 1]
				this.getList()
			},

			// 格式化日期为 YYYY-MM-DD
			formatDate(date) {
				const year = date.getFullYear();
				const month = String(date.getMonth() + 1).padStart(2, '0');
				const day = String(date.getDate()).padStart(2, '0');
				return `${year}/${month}/${day}`;
			},

			async getList() {
				this.status = 'loading'
				const res = await getOrderList({
					pageSize: this.pageSize,
					pageNum: this.pageNum,
					// type: this.type
				})
				this.dataList = [...this.dataList, ...res.rows]
				if (this.dataList.length === res.total) { // 翻的页数 等于 最后一页 时显示没有更多
					this.status = 'nomore' // 没有更多了
					this.isLoadMore = true
				} else {
					this.status = 'loadmore' //继续加载
					this.isLoadMore = false //打开下拉开关
				}
				if (!this.dataList.length) {
					this.isEmpty = true
				} else {
					this.isEmpty = false
				}
			},
			confirm(val) {
				console.log(val.value[0]);
				this.labelText = val.value[0].label
				this.show = false
				this.dataList = []
				this.status = 'loading'
				this.page = 1
				this.getLast30Days(Number(val.value[0].val) - 1)
			},

			goDetail(item) {
				uni.navigateTo({
					url: '/pages/orderDetail/orderDetail?id=' + item.id
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.order {
		display: flex;
		align-items: center;
		flex-direction: column;
		padding-bottom: calc(env(safe-area-inset-bottom) / 2 + 30rpx);

	}

	.order-top {
		width: 100vw;
		height: 90rpx;
		display: flex;
		align-items: center;
		background: #ffffff;
		color: #999;
		font-size: 31rpx;
		padding: 0 20rpx;
	}

	.order-list {
		margin-top: 31rpx;
		width: 710rpx;
		background: #FFF;
		padding: 31rpx;
		border-radius: 29rpx;
		font-size: 27rpx;
		color: #666;
	}

	.list-title {
		display: flex;
		align-items: center;
		font-weight: 600;
		font-size: 34rpx;
		color: #000;
	}

	.status-img {
		width: 40rpx;
		height: 40rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-right: 10rpx;
		margin-top: 5rpx;
	}

	.title-name {
		padding: 10rpx 25rpx;
		background: #e7e7e7;
		font-weight: 400;
		font-size: 27rpx;
		color: #333;
		margin-left: auto;
		border-radius: 100rpx;
	}

	.list-item {
		margin-top: 21rpx;
		display: flex;
		align-items: center;
	}

	.item-border {
		padding-bottom: 31rpx;
		border-bottom: 1px dashed #ececec;
	}

	.order-tag {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.tag-item {
		display: flex;
		align-items: center;
		font-weight: 600;
		font-size: 31rpx;
		color: #000;
		margin-top: 31rpx;
	}
</style>